<template>
  <!-- 协同MES主页 -->
  <view class="container">
    <!-- 个人信息 -->
    <view class="id-card" :style="{ paddingTop: safeAreaInsets + 'px' }">
      <view class="headline">
        <text>供应链协同系统</text>
      </view>
      <view class="idCard-content flex aic jcs">
        <view class="idCard-left flex aic">
          <!-- 登录头像 -->
          <image class="img" :src="avatar" mode="scaleToFill" />
          <view class="profile flex fdc jcs">
            <!-- 格莱默内部账号及供应商子角色显示排版 -->
            <view class="flex fdc" v-if="!checkRole(['gys', 'wxgys', 'mlgys', 'flgys', 'mlgysyg', 'flgysyg', 'ysgys'])">
              <view class="info-name flex aic">
                <text>{{ user.nickName }}</text>
                <image
                  class="money"
                  src="https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/d59dafb7113f4d66aa1713c1e897d7e91709254902535.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="info-area">
                <text class="glm-dept" v-if="!checkRole(['2gyy', 'gysjhy', 'ysgysyg'])"
                  >格莱默服装有限公司</text
                >
                <text class="glm-dept" v-else>{{
                  $store.state.user.roles.includes("2gyy") ||
                  $store.state.user.roles.includes("gysjhy") ||
                  $store.state.user.roles.includes("ysgysyg")
                    ? companyName
                    : user.dept.deptName
                }}</text>
              </view>
            </view>
            <!-- 供应商信息显示排版 -->
            <view v-else class="flex aic">
              <text>{{ user.dept.deptName }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="white-box"></view>
    </view>
    <view class="content">
      <!-- 工作台 -->
      <view class="workbench">
        <view class="workbench-title flex aic" @click="handleClick()">
          <image
            class="title-img"
            src="https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/7f6313988f054630ac759e44544d2cdf1709259700623.png"
            mode="scaleToFill"
          />
          <text class="title-text">工作台</text>
        </view>
        <view class="workbench-content flex">
          <navigator
            class="workbench-order_acceptance"
            v-for="(item, index) in workbenchList"
            :key="index"
            :url="item.pagePath"
            v-show="routerList.indexOf(item.name) !== -1"
          >
            <view class="workbench-content-pub">
              <image class="content-img" :src="item.path" mode="scaleToFill" />
              <text class="workbench-text">{{ item.name }}</text>
            </view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { checkRole } from "@/utils/permission";
import { getCompanyName } from "@/api/system/user.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      chartData: {},
      // 工作台列表
      workbenchList: [
        {
          name: "关注公众号",
          path: "https://glmmes.com:9000/glmmes/2024/03/14/9fcae1688c43484195a0f3ce1b7e5b101710384862143.png",
          pagePath: "/pages/weChatPublic/weChatPublic",
        },
      ],
      safeAreaInsets: 0,
      showUcharts: true,
      notifyData: [],
      companyName: "",
    };
  },
  computed: {
    ...mapState({
      avatar: (state) => state.user.avatar,
      roles: (state) => state.user.roles,
      user: (state) => state.user,
      userOpenid: (state) => state.user.userOpenid,
      routerList: (state) => state.user.routerList,
    }),
  },
  onLoad() {
    this.handleCompany();
  },
  onReady() {
    // 安全区域
    const { safeAreaInsets } = uni.getSystemInfoSync();
    this.safeAreaInsets = safeAreaInsets.top + 20;
  },
  methods: {
	  handleClick(){
		  uni.redirectTo({
		  	url: '../../subpages/views/main/index'
		  });
	  },
    checkRole,
    async handleCompany() {
      if (
        this.$store.state.user.roles.includes("2gyy") ||
        this.$store.state.user.roles.includes("gysjhy") ||
        this.$store.state.user.roles.includes("ysgysyg")
      ) {
        let res = await getCompanyName({
          number: this.$store.state.user.dept.leader,
        });
        this.companyName = res.msg;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  font-size: 32rpx;
  color: #222;
  position: relative;
  // 个人信息
  .content {
    padding: 0 11px 0;
  }

  .id-card {
    color: #fff;
    padding-bottom: 40rpx;
    padding-left: 22rpx;
    padding-right: 22rpx;
    padding-bottom: 70rpx;
    position: relative;
    background: url(https://glm-1324073348.cos.ap-nanjing.myqcloud.com/static/f96ab72eff58449ca591e2ca0d0538f11709254902535.png)
      no-repeat top center/100%;

    .white-box {
      width: calc(100% - 44rpx);
      background: #fff;
      height: 15px;
      position: absolute;
      bottom: -0.5px;
    }

    .headline {
      font-size: 32rpx;
      font-weight: bold;
      padding-bottom: 68rpx;
    }

    .idCard-content {
      margin: 0 10rpx 0;

      .idCard-left {
        .img {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          margin-right: 19rpx;
          background: #fff;
        }

        .profile {
          .glm-text {
            margin-top: 5rpx;
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.5);
          }

          .money {
            width: 55rpx;
            height: 55rpx;
            margin-left: 10rpx;
          }

          .info-name {
            font-size: 30rpx;
          }

          .info-area {
            .glm-dept {
              font-size: 24rpx;
              opacity: 0.5;
            }
          }
        }
      }

      .idCard-right {
        display: flex;

        .note,
        .setting {
          width: 58rpx;
          height: 58rpx;
        }

        .note {
          margin-right: 42rpx;
          position: relative;
        }
      }
    }
  }

  // 工作台
  .workbench {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 0 16rpx;

    .workbench-title {
      border-bottom: 4rpx solid #f3f3f3;
      line-height: 90rpx;

      .title-img {
        width: 34rpx;
        height: 34rpx;
        margin-right: 20rpx;
      }

      .title-text {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .workbench-content {
      padding: 10rpx 35rpx;
      flex-wrap: wrap;

      .workbench-order_acceptance {
        padding: 10rpx 0;
        width: 25%;
        height: 50%;
      }

      .workbench-content-pub {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        // margin-right: 41rpx;
      }

      .content-img {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 17rpx;
      }

      .workbench-text {
        font-size: 26rpx;
      }
    }
  }
}
</style>
